import Vue from 'vue';

import app from './App.vue';
import router from './router.js';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

import VueResource from 'vue-resource';
Vue.use(VueResource);

import VuePreview from 'vue-preview'   //图片预览插件
Vue.use(VuePreview)

import Vuex, { mapState } from 'vuex'

Vue.use(Vuex);

var store = new Vuex.Store({
  state: {  //this.$store.state.***
    
    shopCar: [{
      id: 1,
      count: 2,
      checked: true,
      price: 123
    },
    {
      id: 2,
      count: 1,
      checked: true,
      price: 234
    },
    {
      id: 3,
      count: 3,
      checked: true,
      price: 454
    }]  //定义购物车存储数组，初始化为空

  },
  mutations: {  //外部组件调用该方法，来修改state中的值
    addgoodsinfo(state, goodsInfo) {
      
      //假设该商品为加入到购物车
      var flag = false;

      state.shopCar.some(item => {   //若购物车存在该商品
        if(item.id == goodsInfo.id) {
          item.count += parseInt(goodsInfo.count);
          flag = true;
          return true;
        }
      })

      if(flag == false) {
        state.shopCar.push(goodsInfo);
      }

      //将更新后的数据存到缓存中
      localStorage.setItem('car', JSON.stringify(state.shopCar))
    },
    seleteGoodsCount(state, goodsinfo) {
      state.shopCar.some(item => {
        if(item.id == goodsinfo.id) {
          item.count = parseInt(goodsinfo.count);
          return true;
        }
      })

      //将修改后的数据   重新存到缓存中
      localStorage.setItem('car', JSON.stringify(state.shopCar))
    },

    remoreGoods(state, goodsinfo) {  //删除购物车商品
      state.shopCar.some((item, index) => {

        if(item.id == goodsinfo.id) {
          state.shopCar.splice(index, 1);

          return true;
        }
      })
      localStorage.setItem('car', JSON.stringify(state.shopCar))
    },

    reviseGoodsChecked(state, goodsinfo) {   //修改商品switch开关选中状态
      state.shopCar.some(item => {
        if(item.id == goodsinfo.id) {
          item.checked = goodsinfo.seleted;
        }
        return true;
      })
      localStorage.setItem('car', JSON.stringify(state.shopCar))
    }
  },
  getters: {   //外部组件通过调用其中方法，来得到state中的值
    getCarCount(state) {
      var num = 0;
      state.shopCar.forEach(item => {
        num += item.count;
      })
      return num
    },
    getCarIdCount(state) { //得到对应id的商品 加入到购物车 的数值，自定义对象
      var arr = [];
      if(state.length <= 0) {
        return ;
      }
      state.shopCar.forEach(item => arr[item.id] = item.count);
      return arr;
    },
    getGoodsSwitchChecked(state) {  //获取商品switch开关状态，自定义对象
      var c = [];
      if(state.length <= 0) {
        return ;
      }
      state.shopCar.forEach(item => c[item.id] = item.checked);
      return c;
    }
  }
})

//按需导入 mint-ui 组件库中的组件
import { Header, Swipe, SwipeItem, Button, Lazyload, Switch  } from 'mint-ui';

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Header.name, Header);
Vue.component(Button.name, Button);
Vue.component(Switch.name, Switch);
Vue.use(Lazyload);

//导入 MUI css样式
import './lib/mui/css/mui.min.css';
import './lib/mui/css/icons-extra.css';

import moment from 'moment';   //格式化时间格式

//定义一个格式化时间的全局过滤器
Vue.filter('dateFormat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(pattern);
})

var vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  render: c => c(app),
  router: router,
  store: store     //挂载store，在所有组件中都可使用
})